<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
    <el-row :gutter="40" class="form-item-group">
     <el-col :span="38">
      <el-form-item label="店铺:">
        <el-select v-model="queryParams.storeId" placeholder="请选择店铺编号" clearable size="small">
          <el-option v-for="option in options.storeOptions" :key="option.id" :label="option.storeName" :value="option.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="商城:">
        <el-select v-model="queryParams.mallId" placeholder="请选择商城编号" clearable size="small">
          <el-option v-for="option in options.mallOptions" :key="option.id" :label="option.customerName" :value="option.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="供应商编号:">
        <el-select v-model="queryParams.payCust" placeholder="请选择供应商编号" clearable size="small">
          <el-option v-for="option in options.supplierIdOptions" :key="option.id" :label="option.supplierName" :value="option.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="子订单号:">
        <el-input v-model="queryParams.sourceItemId" size="small" placeholder="请输入订单号" width="1" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item >
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
      </el-col>

        </el-row>
    </el-form>

    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange" @sort-change="handleSortChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="子订单号" width="135"  align="center" prop="sourceItemId" sortable />
      <el-table-column label="商品" sortable width="295" align="center" prop="cargoObjectName" />
      <el-table-column label="商城SPU" width="115" align="center" sortable prop="custSpuId" />
      <el-table-column label="商城SKU"  sortable width="115" align="center" prop="custSkuId" />
      <el-table-column label="销售数" align="center" prop="originalSellQty" />
     <el-table-column label="最终件数" align="center" prop="wtCnt" />
      <el-table-column label="买入单价" align="center" prop="rate" />
      <el-table-column label="买入价" align="center" width="115" sortable prop="amount" />
      <el-table-column label="卖出单价" align="center" prop="amtGenAr" />
      <el-table-column label="商城单价" align="center" prop="custRelSalesUnitPrice" />
    <!--  <el-table-column label="卖出ji" align="center" sortable width="115" prop="amtCur" />
    -->  <el-table-column label="卖出价" align="center" width="115" prop="contractAmount" />
      <el-table-column label="折后价" align="center" width="115" prop="salesOriginAmount" />
      <el-table-column label="实际结算价" align="center" width="115" prop="amtAr" />
       <el-table-column label="退单数" align="center" prop="returnQty" />
       <el-table-column label="退单金额" align="center" prop="returnAmt" />
      <el-table-column label="退单现金" align="center" width="115" prop="storeCuponCash" />
      <el-table-column label="退单里程" align="center" width="115" prop="storeCuponMile" />
      <el-table-column label="折扣活动ID" width="95" show-overflow-tooltip align="center" prop="discountActivityCode" />
      <el-table-column label="领券活动ID" width="95" show-overflow-tooltip align="center" prop="storeDiscountActId" />
      <el-table-column label="领券券码" width="95" show-overflow-tooltip align="center" prop="storeDiscountCode" />
      <el-table-column label="里程券" align="center" prop="storeDiscountAmtPoint" />
      <el-table-column label="现金券" align="center" prop="storeDiscountAmt" />
     <el-table-column label="销售现金" align="center" prop="custSaleUnitPrice" />
      <el-table-column label="销售里程" align="center" prop="custSaleUnitMile" />
      <el-table-column label="退单号" align="center" prop="returnOrderItemNo" />
       <el-table-column label="店铺" align="center" show-overflow-tooltip width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">{{ scope.row.storeName }}</el-button>
        </template>
      </el-table-column>
     <!-- <el-table-column label="原始订单号" align="center" show-overflow-tooltip width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleOrderView(scope.row)">{{ scope.row.basicNo }}</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="商城" width="125" align="center" prop="mallName" />
      <el-table-column label="供应商" width="125" align="center" prop="shipperName" />
      <el-table-column label="业务日期" width="135" align="center" prop="jobDate" />
   <!--  <el-table-column label="未付款金额" align="center" prop="remainedAmount" />
 -->
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button type="text" v-if="handleReturnBtnShow(scope.row.status)" icon="el-icon-truck" @click="handleReturn(scope.row)">退单申请</el-button>
      </template>
<!--        <template slot-scope="scope">
          <el-dropdown type="text" split-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="handleReturnBtnShow(scope.row.status)" icon="el-icon-receiving" divided @click.native="handleReturn(scope.row)">退单处理</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
          </template> -->
      </el-table-column>
    </el-table>

    <!-- 分页 -->

    <!-- 添加/修改对话框 -->
    <el-dialog :title="accountingApFormDialog.title" :visible.sync="accountingApFormDialog.visible" :close-on-click-modal="false" :before-close="resetAccountingApFormDialog" width="500px" append-to-body>
      <el-form ref="accountingApForm" :model="accountingApFormData" :rules="accountingApFormRules" label-width="80px">
        <el-form-item label="业务单据明细序列号" prop="orderItemNo">
          <el-input v-model="accountingApFormData.orderItemNo" placeholder="请输入业务单据明细序列号" />
        </el-form-item>
        <el-form-item label="凭证结算号" prop="acItemId">
          <el-input v-model="accountingApFormData.acItemId" placeholder="请输入凭证结算号" />
        </el-form-item>

        <el-form-item label="结算基于单位" prop="settleBasedOnUnit">
          <el-input v-model="accountingApFormData.settleBasedOnUnit" placeholder="请输入结算基于单位" />
        </el-form-item>
        <el-form-item label="配载日期" prop="dispatchDate">
          <el-date-picker v-model="accountingApFormData.dispatchDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 200px" placeholder="选择配载日期" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmAccountingApFormDialog">确 定</el-button>
        <el-button @click="resetAccountingApFormDialog">取 消</el-button>
      </div>
    </el-dialog>
    <div class="dialog_container">
      <!--退单-->
      <el-dialog
        :title="returnDialog.title"
        :close-on-click-modal="false"
        :before-close="closeReturnDialog"
        :visible.sync="returnDialog.visible"
        width="35%"
      >
        <el-form :model="returnDialogData" label-position="right" label-width="120px" class="dialog_form">
          <el-form-item label="退单数量：">
            <el-input v-model="returnDialogData.returnQty" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeReturnDialog()">取消</el-button>
          <el-button type="primary" @click="confirmReturnDialog()">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import AccountingApApi from '@/api/accounting/AccountingApApi'
import CustomerApi from '@/api/basic/CustomerApi'
import StoreApi from '@/api/basic/StoreApi'
import SalesOrderItemApi from '@/api/order/SalesOrderItemApi'
import SupplierApi from '@/api/basic/SupplierApi'
const defaultAccountingApFormData = {
  invoiceNo: null,
  slipNo: null,
  storeId: null,
  mallId: null,
  status: '0',
  fixStatus: '0',
  basicNo: null,
  orderSeqNo: null,
  orderItemNo: null,
  acItemId: null,
  site: null,
  bizKind: null,
  bizUnit: null,
  accUnit: null,
  branchUnit: null,
  payCust: null,
  billToCust: null,
  ptnrYn: null,
  slipDt: null,
  invoiceType: null,
  taxType: null,
  amtCur: null,
  jobDate: null,
  exrate: null,
  curr: null,
  rate: null,
  wtCnt: null,
  frtCd: null,
  frtNm: null,
  invoiceDt: null,
  miles: null,
  invSettleId: null,
  settlementId: null,
  billNo: null,
  carrierNo: null,
  dispatchId: null,
  distributionNo: null,
  inputType: null,
  autoYn: null,
  pcTerm: null,
  cargoObjectNo: null,
  cargoObjectName: null,
  vehicleNo: null,
  apTypeFlag: null,
  carrierEdiYn: null,
  amount: null,
  paiedFee: null,
  consigneeName: null,
  amtAr: null,
  cargoDamageYn: null,
  remainedAmount: null,
  originalCustName: null,
  batchWorkorderNo: null,
  shippedQtyUnit: null,
  shipperName: null,
  contractAmount: null,
  contractRate: null,
  driverNo: null,
  paymentType: null,
  settlementApplicant: null,
  returnTime: null,
  sourceItemId: null,
  askedTransitFee: null,
  settleBasedOn: null,
  settleBasedOnUnit: null,
  dispatchDate: null
}
export default {
  name: 'AccountingApList',
  data() {
    return {
      options: {
        mallOptions: [],
        supplierIdOptions: [], // 供应商编号字典
        storeOptions: [],
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
       slipNo: null,
        storeId: null,
        mallId: null,
        status: null,
         basicNo: null,
        orderSeqNo: null,
        orderItemNo: null,
        site: null,
        payCust: null,
        slipDt: null,
        amtCur: null,
        jobDate: null,
        wtCnt: null,
        frtCd: null,
        frtNm: null,
        cargoObjectNo: null,
        cargoObjectName: null,
        amount: null,
        paiedFee: null,
        consigneeName: null,
        amtAr: null,
        contractAmount: null,
        sourceItemId: null,
        isValid: this.$constant.Y,
        sortProperty: null,
        sortDirection: null
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      returnDialog: {
        title: '退单',
        visible: false
      },
      returnDialogData: {
       returnQty: null,
       id: null
      },
      accountingApFormDialog: {
        title: '',
        visible: false
      },
      accountingApFormData: Object.assign({}, defaultAccountingApFormData),
      accountingApFormRules: {
        invoiceNo: [{ required: true, message: '发票号不能为空', trigger: 'blur' }],
        slipNo: [{ required: true, message: '支付流水号不能为空', trigger: 'blur' }]
      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.queryParams.sourceItemId = this.$route.params.custItemNo
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      let  that = this;
      CustomerApi.list().then(response => {
        that.options.mallOptions = response.data
      })
      StoreApi.list().then(response => {
        that.options.storeOptions = response.data
      })
      SupplierApi.list().then(response => {
        that.options.supplierIdOptions = response.data
      })
    },
    handleAdd() {
      this.openAccountingApFormDialog()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return AccountingApApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openAccountingApFormDialog(id)
    },
    handleQuery() {
      this.loading = true
      AccountingApApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleView(row) {
      this.$router.push({ path: '/store/form/' + row.storeId })
    },
    // handleOrderView(row) {
    //   this.$router.push({ path: '/order/salesOrder/form/' + row.storeId })
    // },

    handleExport() {
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return AccountingApApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.data)
      })
    },
    openAccountingApFormDialog(id) {
      this.accountingApFormDialog.visible = true
      if (id) {
        this.accountingApFormDialog.title = '财务应付-修改'
        AccountingApApi.get(id).then(response => {
          this.accountingApFormData = {
            ...this.accountingApFormData,
            ...response.data
          }
        })
      } else {
        this.accountingApFormDialog.title = '财务应付-添加'
      }
    },
    handleSortChange(sort) {
      if (sort.order) {
        this.queryParams.sortProperty = sort.prop
        this.queryParams.sortDirection = sort.order === 'ascending' ? 'asc' : 'desc'
      } else {
        this.queryParams.sortProperty = null
        this.queryParams.sortDirection = null
      }
      this.handleQuery()
    },
    confirmAccountingApFormDialog() {
      this.$refs['accountingApForm'].validate(valid => {
        if (valid) {
          if (this.accountingApFormData.id) {
            AccountingApApi.edit(this.accountingApFormData).then(response => {
              this.$message.success('修改成功')
              this.resetAccountingApFormDialog()
              this.handleQuery()
            })
          } else {
            AccountingApApi.add(this.accountingApFormData).then(response => {
              this.$message.success('添加成功')
              this.resetAccountingApFormDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetAccountingApFormDialog() {
      this.accountingApFormDialog = {
        title: '',
        visible: false
      }
      this.accountingApFormData = Object.assign({}, defaultAccountingApFormData)
      this.resetForm('accountingApForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    handleReturn(row) {
         this.returnDialog.visible = true
         this.returnDialogData.returnQty = row.wtCnt
         this.returnDialogData.id = row.sourceItemId
    },
     closeReturnDialog() {
       this.returnDialog = {
         title: '退单',
         visible: false
       }
       this.returnDialogData = {
         returnQty: null
       }
        this.handleQuery()
     },
     confirmReturnDialog() {
         const params = {
           returnQty: this.returnDialogData.returnQty,
           id: this.returnDialogData.id
        }
         SalesOrderItemApi.createReturn(params).then(() => {
           this.$message.success('退单成功!')
           this.closeReturnDialog()
         })
         this.handleQuery()
     },
     handleReturnBtnShow: function(status) {
       const validStatusList = ['CREATED']
       const index = validStatusList.indexOf(status)
       if (index === -1) {
         return false
       } else {
         return true
       }
     },
    resetQuery() {
      this.page.current = 1
     this.queryParams = {
      mallId: null,
      payCust: null,
      storeId: null,
      basicNo: null,
      isValid: this.$constant.Y
    }
      this.handleQuery()
    }
  }
}
</script>
